import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { StyleSheet, View, Text } from 'react-native';
import HomeScreen from '../screens/HomeScreen';
import ProfileScreen from '../screens/ProfileScreen';
import VideoScreen from '../screens/SearchScreen';
import YuCunScreen from '../screens/YuCunScreen';
import MyScreen from '../screens/MyScreent';
import Ionicons from 'react-native-vector-icons/Ionicons';

const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();

const TabNavigator = () => {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName = '';
          
          if (route.name === 'Discover') {
            iconName = focused ? 'compass' : 'compass-outline';
          } else if (route.name === 'Video') {
            iconName = focused ? 'videocam' : 'videocam-outline';
          } else if (route.name === 'My') {
            iconName = focused ? 'musical-notes' : 'musical-notes-outline';
          } else if (route.name === 'Yuncun') {
            iconName = focused ? 'people' : 'people-outline';
          } else if (route.name === 'Account') {
            iconName = focused ? 'person' : 'person-outline';
          }

          return <Ionicons name={iconName} size={size} color={color} />;
        },
       
        headerShown: false
      })}
    >
      <Tab.Screen 
        name="Discover" 
        component={HomeScreen}
        options={{
          title: '发现',
        }}
      />
      <Tab.Screen 
        name="Video" 
        component={VideoScreen}
        options={{
          title: '视频',
        }}
      />
       <Tab.Screen 
        name="My" 
        component={MyScreen}
        options={{
          title: '我的',
        }}
      />
       <Tab.Screen 
        name="Yuncun" 
        component={YuCunScreen}
        options={{
          title: '云村',
        }}
      />
      <Tab.Screen 
        name="Account" 
        component={ProfileScreen}
        options={{
          title: '账号',
        }}
      />
    </Tab.Navigator>
  );
};

const AppNavigator = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen 
          name="MainTabs" 
          component={TabNavigator}
          options={{ headerShown: false }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

const styles = StyleSheet.create({
  tabBar: {
    backgroundColor: '#222222',
    borderTopColor: '#333333',
  },
  tabLabel: {
    fontSize: 12,
  },
});

export default AppNavigator; 